<script setup lang="ts">
import { useMenus } from '@/composables/useMenus'
import type { FormRules } from 'element-plus'
import { useRoute } from 'vue-router'
const { topMenus, getAllMenus, formData, onSubmit, getMenuInfoById, msgCreate } = useMenus()
const rules = reactive<FormRules>({})
const route = useRoute()

// 获取一级菜单 用于选择 菜单层级
// 每个页面重新实例，需要再重新网络请求获取一次getAllMenus菜单，还是改为pinia存储共享更好
onMounted(async () => {
  await getAllMenus()
  if (route.params.id) {
    getMenuInfoById(route.params.id as string)
  }
})
</script>
<template>
  <div class="createOrEdit">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px" size="large">
      <h2>菜单添加/编辑</h2>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formData.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="菜单路径" prop="href">
        <el-input v-model="formData.href" style="width: 280px" />
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-select v-model="formData.parentId" placeholder="请选择菜单属层级">
          <el-option label="顶层菜单" :value="-1" />
          <el-option :label="menu.name" :value="menu.id" v-for="menu in topMenus" :key="menu.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="菜单描述" prop="description">
        <el-input v-model="formData.description" style="width: 480px" />
      </el-form-item>
      <el-form-item label="图标名称" prop="icon">
        <el-input v-model="formData.icon" style="width: 280px" />
      </el-form-item>
      <el-form-item label="是否显示">
        <el-radio-group v-model="formData.shown">
          <!-- 注意 el-radio 的 label是传个后台的值，显示是中间写上 -->
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input v-model="formData.orderNum" style="width: 80px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ msgCreate }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="scss">
.el-form {
  background-color: #fff;
  padding: 40px;
}
</style>
